<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  getEmployeeInfo,
  addEmployeeInfo,
  delEmployeeInfo,
  getAllRoleInfo,
  getAllDepartmentInfo
} from "@/api/departmentApi";
import { ElMessage } from "element-plus";

//角色列表数据
const tableData = ref([]);
//
onMounted(() => {
  getEmpInfo(queryData.value);
  rodeInfo();
});
//请求初始条件
let queryData = ref({
  realName: "",
  department: "",
  pageNum: 1,
  pageSize: 10
});

//发送请求数据
async function getEmpInfo(queryData) {
  let res = await getEmployeeInfo(queryData);
  tableData.value = res.data.data;
  total.value = res.data.total;
}

//总条数
let total = ref(0);
//查询角色信息
function selectData() {
  getEmpInfo(queryData.value);
}
//查看部门信息以及角色信息
let roleData = ref([]);
let depData = ref([]);
async function rodeInfo() {
  let res = await getAllDepartmentInfo();
  depData.value = res.data;
  let res1 = await getAllRoleInfo();
  roleData.value = res1.data;
}
//重置请求条件
function reset() {
  queryData.value = {
    realName: "",
    department: "",
    pageNum: 1,
    pageSize: 10
  };
  addData.value = {
    account: "",
    password: "",
    realName: "",
    mobile: "",
    departmentId: "",
    position: "",
    baseSalary: "",
    birthday: "",
    hireDate: "",
    approvalPolicy: 1,
    employeeType: 1,
    roleId: "",
    annualTarge: ""
  };
}

//分页操作
function chaPage() {
  getEmpInfo(queryData.value);
}
//发送请求数据

//编辑
function handleEdit(row) {
  changeVisible.value = true;
}
//删除
let id = ref();
function handleDel(row) {
  id.value = row.id;
  delVisible.value = true;
}
//重置密码
function handleChange(row) {
  resetVisible.value = true;
}

//添加部门完成以后重置属性 关闭Dialog 执行
function close() {
  reset();
}

// 删除对话框
const delVisible = ref(false);

async function isDel() {
  cancel();
  let res = delEmployeeInfo(id.value);
  getEmpInfo(queryData.value);
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
  }
  id.value = "";
  getEmpInfo(queryData.value);
}
// 添加对话框
const addVisible = ref(false);

async function isAdd() {
  cancel();
  let res = await addEmployeeInfo(addData.value);
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
  }
  getEmpInfo(queryData.value);
}
// 修改对话框
const changeVisible = ref(false);
function isChange() {}
//重置对框话
const resetVisible = ref(false);
function isReset() {}
//关闭对话框
function cancel() {
  addVisible.value = false;
  changeVisible.value = false;
  delVisible.value = false;
}

//添加员工数据
let addData = ref({
  account: "",
  password: "",
  realName: "",
  mobile: "",
  departmentId: "",
  position: "",
  baseSalary: "",
  birthday: "",
  hireDate: "",
  approvalPolicy: 1,
  employeeType: 1,
  roleId: "",
  annualTarge: ""
});

//表单校验
const ruleFormRef = ref();

const rules = ref({
  account: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, max: 5, message: "账号长度为3~5", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 18, message: "密码长度为6~18", trigger: "blur" }
  ],
  realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  departmentId: [{ required: true, message: "请选择部门", trigger: "blur" }],
  position: [{ required: true, message: "请输入职务", trigger: "blur" }],
  baseSalary: [{ required: true, message: "请输入底薪", trigger: "blur" }],
  birthday: [{ required: true, message: "请选择生日", trigger: "blur" }],
  hireDate: [{ required: true, message: "请选择入职时间", trigger: "blur" }],
  approvalPolicy: [{ required: true, message: "请选择类型", trigger: "blur" }],
  employeeType: [{ required: true, message: "请输入选择", trigger: "blur" }],
  roleId: [{ required: true, message: "请选择角色", trigger: "blur" }],
  annualTarge: [
    {
      required: true,
      message: "请输入年度业务目标",
      trigger: "blur"
    }
  ]
});

const submitForm = async formEl => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      isAdd();
    }
  });
};
</script>
<template>
  <div>
    <div>
      <div style="height: 50px; margin-top: 20px; margin-left: 5px">
        <span>员工信息:</span>
        <el-input
          v-model="queryData.realName"
          style="width: 240px; margin-right: 8px"
          placeholder="请输入姓名或联系方式"
        />
        <span>所属部门:</span>
        <el-select
          v-model="queryData.department"
          placeholder="所有"
          size="large"
          style="width: 240px; margin-right: 8px"
        >
          <el-option
            v-for="item in depData"
            :key="item.value"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
        <el-button type="primary" @click="selectData">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
    </div>

    <div style="height: 50px; margin-top: 20px; float: right">
      <el-button type="primary" @click="addVisible = true">添加</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%" max-height="430">
      <el-table-column
        prop="realName"
        label="姓名"
        width="100"
        header-align="center"
      />
      <el-table-column
        prop="mobile"
        label="联系方式"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="department"
        label="所属部门"
        header-align="center"
      />
      <el-table-column
        prop="position"
        label="职务"
        header-align="center"
        width="100"
      />
      <el-table-column prop="account" label="账号" header-align="center" />
      <el-table-column prop="employeeType" label="类型" header-align="center">
        <template #default="{ row }">
          <span v-if="row.employeeType == 1">平台人员</span>
          <span v-else-if="row.employeeType == 2">内销</span>
          <span v-else-if="row.employeeType == 3">外销</span>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="annualTarge"
        label="年度业绩"
        header-align="center"
      />
      <el-table-column
        prop="performance"
        label="已完成业绩"
        header-align="center"
      />
      <el-table-column prop="camelCase" label="完成率" header-align="center" />
      <el-table-column prop="role" label="角色" header-align="center" />
      <el-table-column label="账号状态（开启/禁用）" header-align="center">
        <template #default="{ row }">
          <el-switch v-model="row.status" inactive-value="1" active-value="0" />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        header-align="center"
        align="center"
        fixed="right"
        width="210"
      >
        <template #default="scope">
          <el-button size="small" @click="handleChange(scope.row)">
            重置密码
          </el-button>
          <el-button size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="small" @click="handleDel(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:page-size="queryData.pageSize"
      v-model:current-page="queryData.pageNum"
      size="small"
      background
      layout="total ,sizes,prev, pager,next, jumper, ->,"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      @change="chaPage"
    />
    <!--删除 -->
    <el-dialog
      v-model="delVisible"
      title="删除员工信息"
      width="500"
      align-center
    >
      <span>确定要删除该信息吗</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="delVisible = false">取消</el-button>
          <el-button type="primary" @click="isDel"> 确定删除 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog
      v-model="addVisible"
      title="添加"
      width="750"
      draggable
      overflow
      @close="close"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          :model="addData"
          :rules="rules"
          inline
          class="demo-form-inline"
        >
          <el-form-item label="账号:" prop="account">
            <el-input
              v-model="addData.account"
              placeholder="请输入账号"
              clearable
              style="width: 235px"
            />
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input
              v-model="addData.password"
              placeholder="请输入密码"
              clearable
              style="width: 235px"
            />
          </el-form-item>
          <el-form-item label="姓名:" prop="realName">
            <el-input
              v-model="addData.realName"
              placeholder="请输入"
              clearable
              style="width: 235px"
            />
          </el-form-item>
          <el-form-item label="联系方式:" prop="mobile">
            <el-input
              v-model="addData.mobile"
              placeholder="请输入"
              clearable
              style="width: 210px"
            />
          </el-form-item>
          <el-form-item label="所属部门:" prop="departmentId">
            <el-select
              v-model="addData.departmentId"
              placeholder="请选择"
              clearable
              style="width: 210px"
            >
              <div v-for="item in depData" :key="item.id">
                <el-option :label="item.name" :value="item.id" />
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="职务：" prop="position">
            <el-input
              v-model="addData.position"
              placeholder="请输入"
              clearable
              style="width: 228px"
            />
          </el-form-item>
          <el-form-item label="底薪:" prop="baseSalary">
            <el-input
              v-model="addData.baseSalary"
              placeholder="请输入"
              clearable
              style="width: 235px"
            />
          </el-form-item>
          <el-form-item label="员工生日:" prop="birthday">
            <el-date-picker
              v-model="addData.birthday"
              type="date"
              placeholder="选择日期"
              format="MM-DD"
              date-format="MMM DD"
              style="width: 210px"
            />
          </el-form-item>
          <el-form-item label="入职时间:" prop="hireDate">
            <el-date-picker
              v-model="addData.hireDate"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              date-format="MMM DD"
              style="width: 205px"
            />
          </el-form-item>
          <el-form-item label="角色:" prop="roleId">
            <el-select
              v-model="addData.roleId"
              placeholder="请选择"
              clearable
              style="width: 240px"
            >
              <div v-for="item in roleData" :key="item.id">
                <el-option :label="item.name" :value="item.id" />
              </div>
            </el-select>
          </el-form-item>

          <el-form-item label="类型:" prop="employeeType">
            <el-radio-group v-model="addData.employeeType">
              <el-radio :value="1">普通员工</el-radio>
              <el-radio :value="2">内销</el-radio>
              <el-radio :value="3">外销</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="产品参数支持:" prop="approvalPolicy">
            <el-radio-group v-model="addData.approvalPolicy">
              <el-radio :value="1">需要审核</el-radio>
              <el-radio :value="2">不需要审核</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年度业绩目标:" prop="annualTarge">
            <el-input
              v-model="addData.annualTarge"
              placeholder="请输入"
              clearable
              style="width: 235px"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确认添加
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      v-model="changeVisible"
      title="修改"
      width="500"
      draggable
      overflow
      disabled
    >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="isChange"> 确定修改 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog
      v-model="resetVisible"
      title="重置密码"
      width="500"
      draggable
      overflow
      disabled
    >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="isReset"> 确定重置密码 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped></style>
